{extend name="Base" /}
{block name="title"}{$title}{/block}
{block name="body"}
<style>
	.layui-inline {
		min-width: 500px;
	}
</style>
<div class="layui-tab layui-tab-brief" lay-filter="tab">
	<ul class="layui-tab-title">
		<li class="layui-this">{$name1}</li>
		<li lay-id="1">{$name2}</li>
	</ul>
	<div class="layui-tab-content">
		<div class="layui-tab-item layui-show users-tab">
			<div class="layui-inline">
				<input type="text" name="users" placeholder="请输入检索依据" autocomplete="off" class="layui-input">
			</div>
			<button class="layui-btn" data-type="users">检索</button>
			<table id="users" lay-filter="users_table" class="layui-hide"></table>
		</div>

		<div class="layui-tab-item site-tab">
			<div class="layui-inline">
				<input type="text" name="site" placeholder="请输入检索依据" autocomplete="off" class="layui-input">
			</div>
			<button class="layui-btn" data-type="site">检索</button>
			<table id="site" lay-filter="site_table" class="layui-hide"></table>
		</div>
	</div>
</div>

<script>
	layui.use(['table', 'element'], function () {
		var table = layui.table;
		var element = layui.element;

		table.render({
			id: "users",
			elem: '#users',
			page: true,
			height: 650,
			even: true,
			method: 'post',
			url: "/backend/system/getLog",
			cols: [[
				{field: 'id', title: 'ID', width: 80},
				{field: 'level', title: '日志级别', width: 120},
				{field: 'time', title: '记录时间', width: 180},
				{field: 'content', title: '日志内容', width: 500}
			]]
		});

		element.on('tab(tab)', function (data) {
			if (Number(data.index) === 1) {
				table.render({
					id: "site",
					elem: '#site',
					page: true,
					height: 650,
					even: true,
					method: 'post',
					where: {
						type: 1
					},
					url: "/backend/system/getLog",
					cols: [[
						{field: 'id', title: 'ID', width: 80},
						{field: 'level', title: '日志级别', width: 120},
						{field: 'time', title: '记录时间', width: 180},
						{field: 'controller', title: '记录控制器', width: 150},
						{field: 'content', title: '日志内容', width: 500}
					]]
				});
			}
		});

		var active = {
			users: function () {
				var $search = $("input[name=users]");
				table.reload('users', {
					where: {
						search: $search.val()
					}
				});
				$search.val("");
			},
			site: function () {
				var $search = $("input[name=site]");
				table.reload('site', {
					where: {
						search: $search.val()
					}
				});
				$search.val("");
			}
		};

		$('.layui-btn').on('click', function () {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
	});
</script>
{/block}